<template>
  <el-card>
    <div class="EsFamilyLayOut">
      <div class="EsFamily">
        <el-form :model="man" ref="manRef" class="EsFamilyForm" :rules="rules">
          <el-row :gutter="24">
            <el-form-item id="h">
              <h1 style="font-size: 20px; font-weight: 600; padding: 9px">
                组建家庭
              </h1>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item label="男方身份证号：" prop="idcard">
              <el-input type="text" v-model="man.idcard" style="width: 150px" />
            </el-form-item>
            <el-form-item>
              <el-button
                :type="
                  ManQ == '审核'
                    ? 'primary'
                    : ManQ == '通过'
                    ? 'success'
                    : 'danger'
                "
                @click="Man"
                class="button"
                >{{ ManQ }}</el-button
              >
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item>
              <h1>&nbsp;</h1>
            </el-form-item>
          </el-row>
        </el-form>
        <el-form
          :model="woman"
          ref="womanRef"
          class="EsFamilyForm"
          @submit.prevent
          :rules="rules"
        >
          <el-row :gutter="24">
            <el-form-item>
              <h1>&nbsp;</h1>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item label="女方身份证号：" prop="idcard">
              <el-input
                type="text"
                v-model="woman.idcard"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :type="
                  WomanQ == '审核'
                    ? 'primary'
                    : WomanQ == '通过'
                    ? 'success'
                    : 'danger'
                "
                @click="Woman"
                class="button"
                >{{ WomanQ }}</el-button
              >
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                style="margin-left: 470px"
                @click="this.DialogEsFamily = true"
                >组建家庭</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="EsFamInfo">
        <div class="EsFamInfoLeft">
          <h1 style="font-size: 20px; font-weight: 600; padding: 9px">
            家庭成员添加
          </h1>
          <el-form :model="AddEsF" ref="AddEsForm" :rules="rules">
            <el-form-item label="添加人身份证号：" prop="idcardM">
              <el-input
                type="text"
                v-model="AddEsF.idcardM"
                style="width: 170px"
              />
            </el-form-item>
            <el-form-item label="户主身份证号：" prop="idcardW">
              <el-input
                type="text"
                v-model="AddEsF.idcardW"
                style="width: 170px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                style="margin-left: 470px"
                @click="startAdd(AddEsF)"
                >添加</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="EsFamInfoRight">
          <h1 style="font-size: 20px; font-weight: 600; padding: 9px">
            家庭成员移除
          </h1>
          <el-form :model="DelEsF" :rules="rules">
            <el-form-item label="移除人身份证号：" prop="idcard">
              <el-input
                type="text"
                v-model="DelEsF.idcard"
                style="width: 170px"
              />
            </el-form-item>
            <el-form-item label="户主身份证号：" prop="didcard">
              <el-input
                type="text"
                v-model="DelEsF.didcard"
                disabled
                style="width: 170px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                style="margin-left: 470px"
                @click="Del"
                >移除</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 审核失败 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="DialogAuditingRecord"
      title="审核失败"
      style="width: 450px; font-weight: 600; font-size: 30px"
    >
      <span style="font-weight: 600; font-size: 15px"
        >请检查以下信息，确认无误后重新审核</span
      >
      <ul style="list-style: none">
        <br />
        <li style="font-weight: 600; font-size: 15px">
          1.此处为男/女方身份审核处
        </li>
        <br />
        <li style="font-weight: 600; font-size: 15px">2.男/女方处于已婚状态</li>
      </ul>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="AuditingRecordConfirm()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 组建家庭 -->
    <el-dialog
      v-model="DialogEsFamily"
      title="组建家庭"
      :close-on-click-modal="false"
      style="width: 450px; font-weight: 600; font-size: 30px"
    >
      <el-form
        :model="utilsEsFam"
        ref="utilsEsFam"
        :rules="rules"
        @submit.prevent
      >
        <el-form-item label="家庭代码:" prop="familycode">
          <el-input type="text" v-model="utilsEsFam.familycode" />
        </el-form-item>
        <el-form-item label="家庭关系(男):" prop="relationM">
          <el-radio-group v-model="utilsEsFam.relationM" size="small">
            <el-radio label="户主" border>户主</el-radio>
            <el-radio label="丈夫" border>丈夫</el-radio>
            <el-radio label="妻子" border>妻子</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="家庭关系(女):" prop="relationW">
          <el-radio-group v-model="utilsEsFam.relationW" size="small">
            <el-radio label="户主" border>户主</el-radio>
            <el-radio label="丈夫" border>丈夫</el-radio>
            <el-radio label="妻子" border>妻子</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="establishFamily()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加成员 -->
    <el-dialog
      v-model="DialogAddPeopleInFamily"
      title="添加成员"
      ref="DialogAddEsF"
      :close-on-click-modal="false"
      style="width: 450px; font-weight: 600; font-size: 30px"
    >
      <el-form :model="AddEsF" ref="AddEsF" :rules="rules" @submit.prevent>
        <el-form-item label="与户主关系:" prop="relationM">
          <el-select
            v-model="AddEsF.relationM"
            placeholder="请选择添加人与户主关系"
            clearable
          >
            <el-option
              v-for="dict in this.RelationType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="　婚姻状态:" prop="maritalrelation">
          <el-select
            v-model="AddEsF.maritalrelation"
            placeholder="请选择添加人的婚姻状态"
            clearable
          >
            <el-option
              v-for="dict in this.maritalRelationType"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="Add()"> 添加 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script>
import { ref } from "vue";
import {
  EsFamDel,
  EsFamAuditing,
  EsFamily,
  AddPeopleInFamily,
} from "@/api/record.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      ManQ: "审核",
      DialogAddPeopleInFamily: false,
      DialogEsFamily: false,
      DialogAuditingRecord: false,
      WomanQ: "审核",
      validMan: false,
      validWoman: false,
      maritalRelationType: [
        { value: "未婚", label: "未婚", colorType: "info", cssClass: "" },
        { value: "已婚", label: "已婚", colorType: "info", cssClass: "" },
        { value: "离异", label: "离异", colorType: "info", cssClass: "" },
        { value: "丧偶", label: "丧偶", colorType: "info", cssClass: "" },
      ],
      RelationType: [
        { value: "丈夫", label: "丈夫", colorType: "info", cssClass: "" },
        { value: "妻子", label: "妻子", colorType: "info", cssClass: "" },
        { value: "父子", label: "父子", colorType: "info", cssClass: "" },
        { value: "父女", label: "父女", colorType: "info", cssClass: "" },
        { value: "母子", label: "母子", colorType: "info", cssClass: "" },
        { value: "母女", label: "母女", colorType: "info", cssClass: "" },
        { value: "孙子", label: "孙子", colorType: "info", cssClass: "" },
        { value: "孙女", label: "孙女", colorType: "info", cssClass: "" },
        { value: "外孙", label: "外孙", colorType: "info", cssClass: "" },
        { value: "外孙女", label: "外孙女", colorType: "info", cssClass: "" },
      ],
      utilsEsFam: {
        idcardM: "",
        idcardW: "",
        relationW: "",
        relationM: "",
        familycode: "",
      },
      man: {
        idcard: null,
        sex: 1,
      },
      woman: {
        idcard: null,
        sex: 0,
      },
      rules: {
        maritalrelation: [
          {
            required: true,
            message: "请选择婚姻关系",
            trigger: "blur",
          },
        ],
        idcard: [
          {
            required: true,
            message: "请输入1/2代身份证号",
            pattern:
              /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            trigger: "blur",
          },
        ],
        idcardW: [
          {
            required: true,
            message: "请输入1/2代身份证号",
            pattern:
              /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            trigger: "blur",
          },
        ],
        idcardM: [
          {
            required: true,
            message: "请输入1/2代身份证号",
            pattern:
              /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
          },
        ],
        familycode: [
          {
            required: true,
            message: "请输入家庭代码",
            pattern: /^\d+$/,
          },
        ],
        relationW: [
          {
            required: true,
            message: "请选择家庭关系(男)",
            trigger: "blur",
          },
        ],
        relationM: [
          {
            required: true,
            message: "请选择家庭关系(女)",
            trigger: "blur",
          },
        ],
      },
      AddEsF: {
        idcardM: "", //添加人身份证号
        relationM: "", //添加人与户主关系
        maritalrelation: "", //添加人婚姻状态
        idcardW: "", //户主身份证号
      },
      DelEsF: {
        didcard: null, //没用
        idcard: null,
      },
    };
  },
  created() {},
  methods: {
    AuditingRecordConfirm() {
      this.DialogAuditingRecord = false;
      this.man.idcard = null;
      this.ManQ = "审核";
      this.woman.idcard = null;
      this.WomanQ = "审核";
    },
    Man() {
      this.$refs.manRef.validate((valid) => {
        if (valid) {
          EsFamAuditing(this.man).then((res) => {
            if (res.data.code == 200) {
              this.ManQ = "通过";
              this.validMan = true;
              ElMessage({
                message: "审核通过",
                type: "success",
              });
            } else if (res.data.code == 506) {
              this.ManQ = "失败";
              this.DialogAuditingRecord = true;
            }
          });
        } else {
          ElMessage({
            message: "请输入正确信息后提交审核",
            type: "error",
          });
        }
      });
    },
    Woman() {
      this.$refs.womanRef.validate((valid) => {
        if (valid) {
          EsFamAuditing(this.woman).then((res) => {
            if (res.data.code == 200) {
              this.WomanQ = "通过";
              this.validWoman = true;
              ElMessage({
                message: "审核通过",
                type: "success",
              });
            } else if (res.data.code == 506) {
              this.WomanQ = "失败";
              this.DialogAuditingRecord = true;
            }
          });
        } else {
        }
      });
    },
    establishFamily() {
      if (this.validMan == true && this.validWoman == true) {
        this.$refs.utilsEsFam.validate((valid) => {
          if (valid) {
            this.utilsEsFam.idcardM = this.man.idcard;
            this.utilsEsFam.idcardW = this.woman.idcard;
            EsFamily(this.utilsEsFam).then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  message: "家庭" + this.utilsEsFam.familycode + "组建成功",
                  type: "success",
                });
                this.man.idcard = "";
                this.woman.idcard = "";
                this.ManQ = "审核";
                this.WomanQ = "审核";
                this.DialogEsFamily = false;
                this.utilsEsFam = {};
                this.validMan = false;
                this.validWoman = false;
              }
            });
          } else {
            ElMessage({
              message: "请按照提示输入正确内容",
              type: "warning",
            });
          }
        });
      } else {
        ElMessage({
          message: "男/女方暂未全部通过身份审核",
          type: "warning",
        });
      }
    },
    Del() {
      EsFamDel(this.DelEsF).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            message: "移除成功",
            type: "success",
          });
          this.DelEsF.idcard = "";
        } else if (res.data.code == 202) {
          ElMessage({
            message: res.data.data,
            type: "error",
          });
          this.DelEsF.idcard = "";
        }
      });
    },
    startAdd() {
      this.$refs.AddEsForm.validate((valid) => {
        if (valid) {
          this.DialogAddPeopleInFamily = true;
        }
      });
    },
    Add() {
      this.$refs.AddEsF.validate((valid) => {
        if (valid) {
          AddPeopleInFamily(this.AddEsF).then((res) => {
            if (res.data.code == 200) {
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              this.AddEsF = {};
              this.DialogAddPeopleInFamily = false;
            } else if (res.data.code == 202) {
              ElMessage({
                message: res.data.msg,
                type: "error",
              });
              this.AddEsF = {};
              this.DialogAddPeopleInFamily = false;
            }
          });
        } else {
        }
      });
    },
  },
};
</script>
<style>
#h {
  margin-top: 0;
}
.EsFamilyForm {
  width: 48%;
}
.EsFamInfo .el-form-item__label {
  font-weight: 600;
  width: 200px !important;
}
.EsFamilyForm .el-form-item {
  margin-top: 20px;
}
.EsFamilyForm .el-form-item__label {
  font-weight: 600;
  width: 175px !important;
}
</style>
<style scoped>
.button {
  margin-left: 60px;
}
.EsFamInfo {
  width: 80%;
  height: 35%;
  display: flex;
}
.EsFamInfoLeft,
.EsFamInfoRight {
  width: 50%;
  height: 100%;
  /* border-left: 1px solid black;
  border-bottom: 1px solid black; */
}
/* .EsFamInfoRight{
    border-right: 1px solid black;
} */
.EsFamilyLayOut {
  width: 100%;
  height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.EsFamily {
  margin-top: 5%;
  width: 80%;
  height: 35%;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-around;
}
</style>
